<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" validateTrigger='blur' :rules="rules" :modelValue="valiFormData"
				label-width="120px">
				<uni-forms-item label="产品序号" required name="productName">
					<uni-easyinput v-model="valiFormData.productName" placeholder="产品序号" disabled/>
				</uni-forms-item>
				<uni-forms-item label="用户名称" required name="userCompany">
					<uni-easyinput v-model="valiFormData.userCompany" placeholder="用户名称" />
				</uni-forms-item>
				<uni-forms-item label="姓名" required name="userName">
					<uni-easyinput v-model="valiFormData.userName" placeholder="联系人" />
				</uni-forms-item>
				<uni-forms-item label="电话" required name="userPhone">
					<uni-easyinput v-model="valiFormData.userPhone" placeholder="电话" />
				</uni-forms-item>
				<uni-forms-item label="地址" required name="userAddress">
					<uni-easyinput v-model="valiFormData.userAddress" placeholder="地址" />
				</uni-forms-item>

				<uni-forms-item label="现场问题描述" required name="problemDesc">
					<uni-easyinput type="textarea" v-model="valiFormData.problemDesc" placeholder="现场问题描述" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('valiForm')" :disabled="submitDisabled">提交</button>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				title: '登录适配',
				valiFormData: {
					productName: '',
					userCompany: '',
					userName: '',
					userPhone: '',
					userAddress: '',
					problemDesc: '',
				},
				submitDisabled: false,
				fileList: [],
				// 校验规则
				rules: {
					productName: {
						rules: [{
							required: true,
							errorMessage: '产品序号不能为空'
						}]
					},
					userCompany: {
						rules: [{
							required: true,
							errorMessage: '用户名称不能为空'
						}]
					},
					userName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					userPhone: {
						rules: [{
							required: true,
							errorMessage: '电话不能为空'
						}, {
							pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
							errorMessage: '电话格式错误'
						}]
					},
					userAddress: {
						rules: [{
							required: true,
							errorMessage: '地址不能为空'
						}]
					},
					problemDesc: {
						rules: [{
							required: true,
							errorMessage: '现场问题描述不能为空'
						}]
					},
				},
				id: ''
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				console.log(this.$store.getters.productId)
				this.request({
					'url': '/wx/product/info/' + this.$store.getters.productId,
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						// this.list = res.info
						this.valiFormData.productName = res.info.code
					}
				}).catch(err => {

				})
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					this.request({
						'url': '/wx/syn/feedback/save',
						'method': 'post',
						'data': {
							productName: res.productName,
							userCompany: res.userCompany,
							productId: this.$store.getters.productId,
							userName: res.userName,
							userPhone: res.userPhone,
							userAddress: res.userAddress,
							problemDesc: res.problemDesc,
						}
					}).then(res => {
						console.log(res)
						if (res && res.code == 200) {
							// this.list = res.info
							// this.valiFormData.productModel = res.info.model
							uni.showToast({
								title: '添加成功'
							})
							setTimeout(() => {
								uni.$emit("getlist") //这里可以传个空,也可以传值过去
								uni.navigateBack()
								this.submitDisabled = false
							}, 1500)
						}
					}).catch(err => {
						this.submitDisabled = false
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

		}
	}
</script>

<style>
	.container {
		padding: 15px;
		background-color: #fff;
		height: 100%;
		box-sizing: border-box;
	}

	.fileItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fileLeft,
	.fileRight {
		display: flex;
		align-items: center;
	}

	.fileLeft {
		width: 80%;
	}

	.fileRight {
		width: 60px;
	}

	.fileName {
		width: 173px;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	.example .uni-forms-item__label {
		font-size: 16px;
	}

	.example .uni-forms-item__error {
		font-size: 14px;

	}

	.uni-select__selector {
		height: 300px;
		overflow: auto;
	}
</style>